<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <l-panel>
      <template #toolLeft>
        <div class="l-panel--item">
          <el-input
            :placeholder="$t('请输入关键字查询')"
            v-model="searchWord"
            @keyup.enter.native="hanleSearch"
            size="mini"
          >
            <el-button slot="append" icon="el-icon-search" @click="hanleSearch"></el-button>
          </el-input>
        </div>
      </template>
      <template #toolRight>
        <l-tool-btns @click="handleAdd()">
          <l-excel-btns></l-excel-btns>
        </l-tool-btns>
      </template>
      <l-table :loading="tableLoading" :columns="columns" :dataSource="tableShowData" row-key="f_Id">
        <template v-slot:f_CreateDate="scope">
          {{ lr_dateFormat(scope.row.f_CreateDate) }}
        </template>
        <template v-slot:f_Icon="scope">
          <i :class="scope.row.f_Icon"></i>
        </template>
        <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>

    <l-dialog
      :title="formTitle"
      :visible.sync="formVisible"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form"></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
const api = window.$api.message.user;
import MyForm from "./form";
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage: true,
      // 表格
      columns: [
        { label: "用户名称", prop: "f_Name", minWidth: "120" },
        { label: "用户编码", prop: "f_Code", minWidth: "120" },
        { label: "图标", prop: "f_Icon", width: "60", align: "center" },
        { label: "创建人", prop: "f_CreateUserName", width: "100", align: "center" },
        { label: "创建时间", prop: "f_CreateDate", width: "160" },
        { label: "备注", prop: "f_Description", width: "200" },
      ],
      tableBtns: [
        { prop: "Edit", label: "编辑" },
        { prop: "Delete", label: "删除" },
      ],
      tableLoading: false,
      searchWord: "",
      tableShowData: [],
      tableData: [],

      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.loadTable();
    });
  },
  computed: {},
  methods: {
    hanleSearch() {
      if (this.searchWord) {
        this.tableShowData = this.tableData.filter(
          (item) => item.f_Name.indexOf(this.searchWord) > -1 || item.f_Code.indexOf(this.searchWord) > -1
        );
      } else {
        this.tableShowData = this.tableData;
      }
    },
    loadTable() {
      this.searchWord = "";
      this.tableLoading = true;
      api
        .getList()
        .then((res) => {
          this.tableData = this.$deepClone(res.data.data);
          this.tableShowData = this.tableData;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 表单部分
    handleAdd() {
      this.formEdit = false;
      this.showForm("新增消息用户");
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.showForm("编辑消息用户");
    },
    handleDelete($index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.remove(row.f_Id).then(() => {
            this.tableShowData.splice($index, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async handleSave(showLoading, hideLoading) {
      showLoading();
      if (!(await this.$refs.form.validateForm())) {
        hideLoading();
        return;
      }
      const formData = this.$refs.form.getForm();
      if (this.formEdit) {
        // 修改数据
        api
          .update(formData.f_Id, formData)
          .then(() => {
            hideLoading();
            this.formVisible = false;
            this.$message({
              type: "success",
              message: "更新成功!",
            });
            this.loadTable();
          })
          .catch(() => {
            hideLoading();
          });
      } else {
        // 新增数据
        api
          .add(formData)
          .then(() => {
            hideLoading();
            this.formVisible = false;
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.loadTable();
          })
          .catch(() => {
            hideLoading();
          });
      }
    },
    handleOpenedForm() {
      if (this.formEdit) {
        this.$refs.form.setForm(this.formEditRow);
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
    showForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
  },
};
</script>
